@charset "UTF-8";
@import "./element/index.scss";
@import "./iconfont/index.css";

:root:not([theme-mode=dark]) {
  // 重置主色调 start
  --yh-brand-color-1: #ecf2fe;
  --yh-brand-color-2: #d4e3fc;
  --yh-brand-color-3: #bbd3fb;
  --yh-brand-color-4: #96bbf8;
  --yh-brand-color-5: #699ef5;
  --yh-brand-color-6: #4787f0;
  --yh-brand-color-7: #266fe8;
  --yh-brand-color: #0052d9;
  --yh-brand-color-9: #0034b5;
  --yh-brand-color-10: #001f97;
  // 重置主色调 end
  --border-radius: 3px;
  --dd-color-content: #86909c;
  --dd-font-gray-1: rgba(0, 0, 0, .8);
  --dd-scrollbar-color: rgba(0, 0, 0, .1);
  --dd-scroll-track-color: #fff;
  --dd-color-secondary-brand: rgb(99, 133, 166);

  .headers-root {
    --header-logo-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px,
      rgba(255, 255, 255, 0.2) 1px 3px 3px;
    --header-bottom-color: #dcdfe6;
    --yh-shoadow-bootom: 0 2px 3px rgba(0, 0, 0, 0.05);

  }

  .actionTheme {
    --bg-color-tab-select: #fff;
    --anim-time-fn-easing: cubic-bezier(.38, 0, .24, 1);
    --anim-duration-moderate: .24s;
    --text-disabled: rgba(0, 0, 0, .26);
    --bg-color-component: #eee;

  }

  .detail-root {
    --bages-bg: var(--yh-gray-color-5);
    --bages-color: var(--yh-font-white-1);

  }
}

:root[theme-mode=dark] {
  --yh-brand-color-1: #1b2f51;
  --yh-brand-color-2: #173463;
  --yh-brand-color-3: #143975;
  --yh-brand-color-4: #103d88;
  --yh-brand-color-5: #0d429a;
  --yh-brand-color-6: #054bbe;
  --yh-brand-color-7: #2667d4;
  --yh-brand-color: #4582e6;
  --yh-brand-color-9: #699ef5;
  --yh-brand-color-10: #96bbf8;

  --dd-color-content: var(--yh-gray-color-9);
  --dd-font-gray-1: var(--yh-font-white-2);

  --dd-scrollbar-color: rgba(255, 255, 255, .1);
  --dd-scroll-track-color: #333;
  --dd-color-secondary-brand: #819ece;

  .headers-root {
    --header-logo-shadow: rgba(0, 0, 0, 0.5) 0 5px 6px,
      rgba(0, 0, 0, 0.2) 1px 3px 3px;
    --header-bottom-color: #666666;
    --yh-shoadow-bootom: var(--yh-shadow-1);

  }

  .actionTheme-root {
    --bg-color-tab-select: #4b4b4b;
    --anim-time-fn-easing: cubic-bezier(.38, 0, .24, 1);
    --anim-duration-moderate: .24s;
    --text-disabled: rgba(255, 255, 255, .22);
    --bg-color-component: #383838;
  }

  .detail-root {
    --bages-bg: var(--yh-gray-color-11);
    --bages-color: var(--yh-gray-color-5);
  }
}



/*滚动条整体部分,必须要设置*/
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/*滚动条的轨道*/
::-webkit-scrollbar-track {
  background-color: var(--dd-scroll-track-color);
}

/*滚动条的滑块按钮*/
::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: var(--dd-scrollbar-color);
  transition: all .2s ease-in-out;
}




html {
  // width: 100%;
  min-height: 100%;
  // overflow: hidden;
  background-color: var(--yh-bg-color-secondarycontainer);

}

body {
  // width: 100%;
  // height: 100%;
  // // overflow-y: auto;
  // overflow-y: overlay;
  // position: relative;
  // z-index: 0;

}

.dark {
  ::-webkit-scrollbar-track {
    background-color: var(--yh-bg-color-secondarycontainer);
  }

  /*滚动条的滑块按钮*/
  ::-webkit-scrollbar-thumb {
    background-color: var(--dd-scroll-track-color);
  }
}

#app {
  width: 100%;
  min-height: 100%;
  // font-family: BlinkMacSystemFont, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
}

.container-bg {
  background: var(--yh-bg-color-container);
}

.box-shadow-0 {
  box-shadow: var(--yh-shadow);
}

.box-shadow-1 {
  box-shadow: var(--yh-shadow-1);
}

.box-shadow-2 {
  box-shadow: var(--yh-shadow-2);
}

.box-shadow-3 {
  box-shadow: var(--yh-shadow-3);
}

.yh-brand-color {
  color: var(--yh-brand-color);
}

.yh-brand-color-hover {
  color: var(--yh-brand-color-hover);
}

.gb-text-color-primary {
  color: var(--yh-text-color-primary);
}

.gb-text-color-secondary {
  color: var(--yh-text-color-secondary);
}

//文章管理页面  content内容
.gaobug {
  max-width: 1200px;
  padding: $header-top 16px 16px;
  margin: auto;
  min-height: 100vh;
  position: relative;
}

.gaobug-contents {
  height: $content-height;
  width: 100%;
}


.emoji {
  display: inline;
  width: 20px;
  height: 20px;
  margin: 0 2px;
  vertical-align: sub;
}


@media screen and (min-width:960px) {
  .medium-screen-hide{
    display: none;
  }

}
@media screen and (max-width:960px) {
  $header-top:66px;

  .gaobug {
    padding: $header-top 0 0 0;
  }
  //960以下要消失的元素
  .small-screen-hide{
    display: none;
  }
  .yh-button.yh-button--size-medium{
    height:28px;
    line-height: 26px;
    padding:0 12px;
  }

}